<template>
  <div class="steeringMotor">
    <div class="tooltips">
      <span>{{ $t("提示由于诊断分析数据过多系统自动清理7天之前的数据") }}</span>
    </div>
    <div class="check">
      <el-checkbox-group v-model="type" @change="typeChange">
        <el-checkbox :label="0">{{ $t("左前") }}</el-checkbox>
        <el-checkbox :label="1">{{ $t("右前") }}</el-checkbox>
        <el-checkbox :label="2">{{ $t("左后") }}</el-checkbox>
        <el-checkbox :label="3">{{ $t("右后") }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="chartBox">
      <div class="chartShadow electricity" ref="electricityChart">
        <div class="header">
          <div class="title">{{ $t("电流电压") }}</div>
          <div class="selectGroup">
            <el-date-picker
              v-model="electricityTime"
              type="datetimerange"
              size="medium"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')"
            >
            </el-date-picker>
            <img
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('electricity')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <lineChart :lineChartAll="lineChartAll"></lineChart>
      </div>
      <div class="chartShadow walktemp" ref="walktempChart">
        <div class="header">
          <div class="title">{{ $t("温度") }}</div>
          <div class="selectGroup">
            <el-date-picker
              v-model="walktempTime"
              type="datetimerange"
              size="medium"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')"
            >
            </el-date-picker>
            <img
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('walktemp')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <lineChart :lineChartAll="lineChartAll"></lineChart>
      </div>
      <div class="chartShadow speed" ref="speedChart">
        <div class="header">
          <div class="title">{{ $t("速度") }}</div>
          <div class="selectGroup">
            <el-date-picker
              v-model="speedTime"
              type="datetimerange"
              size="medium"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')"
            >
            </el-date-picker>
            <img
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('speed')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <lineChart :lineChartAll="lineChartAll"></lineChart>
      </div>
    </div>
  </div>
</template>
<script>
import lineChart from "./components/lineChart.vue";
export default {
  name: "steeringMotor",
  props: {},
  data() {
    return {
      // 折线图数据
      lineChartAll: [
        {
          name: this.$t("CPU使用"),
          type: "line",
          // stack: 'Total',
          data: [20, 23, 25, 21, 29, 33, 21, 38, 20, 23, 25, 21],
        },
        {
          name: this.$t("CPU剩余"),
          type: "line",
          // stack: 'Total',
          data: [35, 23, 24, 25, 37, 15, 37, 23, 35, 23, 24, 25],
        },
      ],
      type: [0, 1, 2, 3],
      electricityTime: "",
      walktempTime: "",
      speedTime: "",
    };
  },
  components: {
    lineChart,
  },
  computed: {},
  methods: {
    typeChange(val) {
      console.log(val);
    },
    fullScreen(type) {
      if (!screenfull.isEnabled) {
        this.$message({
          message: this.$t("你的浏览器不支持全屏"),
          type: "warning",
        });
        return false;
      }
      switch (type) {
        case "cpu":
          screenfull.toggle(this.$refs.cpuChart);
          break;
        case "gpu":
          screenfull.toggle(this.$refs.gpuChart);
          break;
        case "storage":
          screenfull.toggle(this.$refs.storageChart);
          break;
        case "disk":
          screenfull.toggle(this.$refs.diskChart);
          break;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.steeringMotor {
  padding: 0 24px;
}
.check {
  margin: 16px 0;
}
.chartShadow {
  width: 100%;
  height: 382px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.06);
}
.chartShad {
  width: 49.6%;
  height: 382px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.06);
}
.electricity,
.walktemp,
.speed {
  position: relative;
  .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px 16px;
    display: flex;
    justify-content: space-between;
    z-index: 999;
    .title {
      font-size: 16px;
      font-weight: bold;
      color: #00d1ff;
      display: flex;
      align-items: center;
    }
    .selectGroup {
      .chat {
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-left: 16px;
      }
    }
  }
}
::v-deep {
  input {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border: none !important;
  }
}
</style>
